<template>
    <div class="ml-16px mr-16px content-container">
        <Filter :websites="state.websites" @update:data="handleUpdateData" @update:day="handleUpdateDay" />
        <div class="pl-26px pr-26px pb-26px">
            <el-row>
                <el-col :span="12">
                    <Three v-model="state.activeIndex" @update:model-value="handleTabClick" active-color="#ffffff">
                        <TabItem label="IP" path="" :index="0">
                            <ChinaMap :data="state.regionData" :index="0" />
                        </TabItem>
                        <TabItem label="UV" path="" :index="1">
                            <ChinaMap :data="state.regionData" :index="1" />
                        </TabItem>
                        <TabItem label="PV" path="" :index="2">
                            <ChinaMap :data="state.regionData" :index="2" />
                        </TabItem>
                    </Three>
                </el-col>
                <el-col :span="12">
                    <RegionList :data="state.regionData" />
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import Filter from './components/Filter.vue'
import ChinaMap from './components/ChinaMap.vue'
import RegionList from './components/RegionList.vue'
import Three from '@/components/Tab/Three.vue'
import TabItem from '@/components/Tab/Item.vue'
import { getRegionApi } from '@/api/sem/index'
import { IRegion,ISite } from '@/api/sem/types'

const state = reactive({
    day: 1,
    startTime: '',
    endTime: '',
    device: 0,
    activeIndex: 0,
    website: '',
    websites: <ISite[]>[],
    regionData: <IRegion[]>[],
    type: 'ip'
})

async function getRegion() {
    state.regionData = []
    const res: ResType = await getRegionApi({
        start: state.day,
        begintime: state.startTime,
        endtime: state.endTime,
        url: state.website,
        viewtip: state.type,
        equ: state.device
    })
    if (res.code == 200) {
        state.regionData = res.data
        state.websites = res.weburllist
    }
}

function handleTabClick(val: any) {
    const { index, label } = val
    state.activeIndex = index
    state.type = label.toLowerCase()
    getRegion()
}

async function handleUpdateData(value:any){
    const { device,endTime,startTime,type,website } = value
    state.device = device
    state.endTime = endTime
    state.startTime = startTime
    state.type = type
    state.website = website
    getRegion()
}

function handleUpdateDay(value: any){
    const { day } = value
    state.day = day
    state.endTime = ''
    state.startTime = ''
    getRegion()
}

onMounted(() => {
    getRegion()
})
</script>

<style lang="scss" scoped>

</style>